import numpy as np
import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go


def get_matrix_operations_component():
    return html.Div([
        html.H1('矩阵向量乘法可视化'),
        
        # 矩阵输入
        html.Div([
            html.Label('矩阵A:'),
            html.Div([
                dcc.Input(id='a11', type='number', value=1, style={'width': '50px'}),
                dcc.Input(id='a12', type='number', value=0.5, style={'width': '50px'}),
                dcc.Input(id='a13', type='number', value=0, style={'width': '50px'}),
            ], style={'margin': '10px'}),
            html.Div([
                dcc.Input(id='a21', type='number', value=0.5, style={'width': '50px'}),
                dcc.Input(id='a22', type='number', value=1, style={'width': '50px'}),
                dcc.Input(id='a23', type='number', value=0, style={'width': '50px'}),
            ], style={'margin': '10px'}),
            html.Div([
                dcc.Input(id='a31', type='number', value=0, style={'width': '50px'}),
                dcc.Input(id='a32', type='number', value=0, style={'width': '50px'}),
                dcc.Input(id='a33', type='number', value=1, style={'width': '50px'}),
            ], style={'margin': '10px'}),
        ]),
        
        # 向量输入
        html.Div([
            html.Label('向量x:'),
            html.Div([
                dcc.Input(id='x1', type='number', value=1, style={'width': '50px'}),
                dcc.Input(id='x2', type='number', value=1, style={'width': '50px'}),
                dcc.Input(id='x3', type='number', value=0, style={'width': '50px'}),
            ], style={'margin': '10px'}),
        ]),
        
        # 数学原理与应用说明
        html.Div([
            html.H4('矩阵向量乘法数学原理与应用'),
            
            html.Div([
                html.P('• 数学家: Arthur Cayley (1821-1895) 和 James Joseph Sylvester (1814-1897) 发展矩阵运算理论'),
                html.P('• 原理: y = A·x，其中y_i = Σ(a_ij * x_j)'),
                html.P('• 应用: 计算机图形学中的变换、机器学习中的线性变换、物理学中的线性系统'),
            ], style={'marginBottom': '20px', 'padding': '10px', 'border': '1px solid #ddd', 'borderRadius': '5px'}),
        ]),
        
        # 图形展示
        dcc.Graph(id='matrix-vector-plot'),
    ])


def register_matrix_operations_callbacks(app):
    @app.callback(
        Output('matrix-vector-plot', 'figure'),
        [Input('a11', 'value'), Input('a12', 'value'), Input('a13', 'value'),
         Input('a21', 'value'), Input('a22', 'value'), Input('a23', 'value'),
         Input('a31', 'value'), Input('a32', 'value'), Input('a33', 'value'),
         Input('x1', 'value'), Input('x2', 'value'), Input('x3', 'value')]
    )
    def update_matrix_vector_plot(a11, a12, a13, a21, a22, a23, a31, a32, a33, x1, x2, x3):
        A = np.array([[a11, a12, a13], [a21, a22, a23], [a31, a32, a33]])
        x = np.array([x1, x2, x3])
        y = np.dot(A, x)
        
        fig = go.Figure()
        
        # 添加原始向量
        fig.add_trace(go.Scatter3d(
            x=[0, x[0]], y=[0, x[1]], z=[0, x[2]],
            mode='lines+markers',
            name='原始向量x',
            line=dict(color='blue', width=3),
            marker=dict(size=5)
        ))
        
        # 添加变换后向量
        fig.add_trace(go.Scatter3d(
            x=[0, y[0]], y=[0, y[1]], z=[0, y[2]],
            mode='lines+markers',
            name='变换后向量y=Ax',
            line=dict(color='red', width=3),
            marker=dict(size=5)
        ))
        
        fig.update_layout(
            scene=dict(
                xaxis=dict(title='X轴', gridcolor='rgba(0, 0, 0, 0.8)', showbackground=True, backgroundcolor='rgba(255, 255, 255, 0.5)', gridwidth=4, showgrid=True, nticks=10, title_font=dict(size=16, color='black')),
                yaxis=dict(title='Y轴', gridcolor='rgba(0, 0, 0, 0.8)', showbackground=True, backgroundcolor='rgba(255, 255, 255, 0.5)', gridwidth=4, showgrid=True, nticks=10, title_font=dict(size=16, color='black')),
                zaxis=dict(title='Z轴', gridcolor='rgba(0, 0, 0, 0.8)', showbackground=True, backgroundcolor='rgba(255, 255, 255, 0.5)', gridwidth=4, showgrid=True, nticks=10, title_font=dict(size=16, color='black'))
            ),
            title='矩阵向量乘法可视化',
            showlegend=True
        )
        
        return fig